<template>
  <el-tag
    v-for="tag in dynamicTags"
    :key="tag"
    class="mx-1"
    closable
    :disable-transitions="false"
    @close="handleClose(tag)"
  >
    {{ tag.name }}({{ tag.school }})
  </el-tag>
  <el-input
    v-if="inputVisible"
    ref="InputRef"
    v-model="inputValue"
    class="ml-1 w-20"
    placeholder="请输入姓名"
    size="small"
    @keyup.enter="handleInputConfirm"
    @blur="handleInputConfirm"
  />
  <el-input
    v-if="inputVisible"
    ref="InputRef2"
    v-model="inputValue2"
    class="ml-1 w-20"
    placeholder="请输入学校"
    size="small"
    @keyup.enter="handleInputConfirm"
    @blur="handleInputConfirm"
  />
  <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
    + 添加
  </el-button>
</template>

<script>
import {nextTick, ref, defineProps, toRefs, watch} from 'vue'
import { ElInput } from 'element-plus'
import MinioUpload from "./Upload/MinioUpload.vue";

export default {
  components: {
    MinioUpload
  },
  props: {
    list: {
      type: Array, // 参数类型
      default: [], //默认值
      required: true //是否必传
    }
  },
  setup(props, {emit}) {
    const inputValue = ref('')
    const inputValue2 = ref('')
    const dynamicTags = ref([])
    const inputVisible = ref(false)
    const InputRef = ref(null)

    let {list} = toRefs(props);
    watch(list, async(val) => {
      dynamicTags.value = [];
      if (val) {
        dynamicTags.value.push(...val);
      }
    });

    const handleClose = (tag) => {
      dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
    }

    const showInput = () => {
      inputVisible.value = true
      nextTick(() => {
        InputRef.value.focus()
      })
    }

    const handleInputConfirm = () => {
      if (inputValue.value && inputValue2.value) {
        dynamicTags.value.push({name: inputValue.value, school: inputValue2.value})
        inputVisible.value = false
        inputValue.value = ''
        inputValue2.value = ''
        emit('success', dynamicTags.value)
      } else if (inputValue.value || inputValue2.value) {

      } else {

      }

    }

    return {
      inputValue,
      inputValue2,
      dynamicTags,
      inputVisible,
      InputRef,
      handleClose,
      showInput,
      handleInputConfirm
    }
  }
}
</script>
